/*
 * @Author: scopesang
 * @Date: 2022-03-16 09:35:51
 * @LastEditors: scopesang
 * @LastEditTime: 2022-03-17 10:11:40
 * @FilePath: \react-js-master\src\components\day5.jsx
 * @Description: 
 * 
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved. 
 */
import React, { Component } from 'react'

export default class day5 extends Component {
    // 完整写法 放到构造器里 js 的 class类中 是不会自动绑定this
    constructor(props) {
        super(props)
        this.state = {
            name: "name",
            number: 1
        };
        // this.addNunmber = this.addNunmber.bind(this)
    }
    render() {
        return (
            <div>
                <div>{this.state.name}</div>
                <button onClick={() => { this.setState({ number: this.state.number + 1 }) }}>{this.state.number}</button>
                {/* <button onClick={this.addNunmber}>按钮二</button> */}
            </div >
        )
    }
    addNunmber() {

        // 这时候this 是 undefined
        // undefined undefined
        this.setState({
            number: this.state.number + 1
        })
        // 第一种、第二种
        // 使用bind 修改 this 指向 this.addNunmber.bind(this)
        // 箭头函数规避 this指向问题 ()=>{this.addNum()} 点击返回这个函数运行 
        // 最后一种
        // {this.addNunmber}    
        // this.addNunmber = this.addNunmber.bind(this)  
    }
}

// ### 第五天
//  Jsx 里面方法执行不能加括号 因为js看到就执行
